<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="content-wrap bg-F7F8FF">
			<view class="tips font28 color-main">
				<view class="bw-tishi bwfont tips-icon"></view>
				<view class="">帮助 TA 人快速了解并认识自己，最多可添加5项。填写自定义标签请遵守中国法律，并避免歧义，虚假或不恰当的标签会被删除。</view>
			</view>
			<view class="card bg-base">
				<view class="hd fboxRow Ycenter font28 color-main font-weight">已设标签</view>
				<view class="bd font28 fboxWrap Ycenter">
					<view class="tag fboxRow Ycenter bg-F2F2F2" v-for="(item, index) in fromData.listPortray" :key="index">
						{{ item.portrayName }}
						<view class="icon-del" @click="delTag(index)"><u-icon name="close" color="#110C22"></u-icon></view>
					</view>
					<view class="tag fboxRow Ycenter bg-main color-FFF addTag" @click="addTag">
						<view class="icon-add"><u-icon name="plus" size="10" color="110C22"></u-icon></view>
						新增
					</view>
				</view>
			</view>
		</view>

		<ModelPublic ref="ModelPublicRef" title="请输入个性标签" confirmText="保存" @confirm="verifyTap">
			<template #msg>
				<u-input v-model="addText" placeholder="请输入个性标签"></u-input>
			</template>
		</ModelPublic>
	</view>
</template>
<script>
import { strTrim, debounce } from '@/static/js/common.js';
import ModelPublic from '@/components/model-public/index.vue';
import { editMixins } from './edit.mixins.js';
import { cardPortrayAdd, cardPortrayDel } from '@/api/card.js';
export default {
	mixins: [editMixins],
	components: { ModelPublic },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			fromData: {
				listPortray: []
			},
			isAdd: false,
			addText: ''
		};
	},
	onLoad() {
		if(!this.fromData.listPortray){
			this.fromData.listPortray = []
		}
	},
	methods: {
		// 删除标签
		delTag(index) {
			cardPortrayDel({
				portrayId: this.fromData.listPortray[index].portrayId,
				portrayType: 1
			}).then(res => {
				if (res.data) {
					this.fromData.listPortray.splice(index, 1);
				}
			});
		},
		// 添加标签弹窗
		addTag() {
			// this.isAdd = true;
			if (this.fromData.listPortray && this.fromData.listPortray.length == 5) {
				uni.showToast({
					title: '标签最多只能设置五个',
					icon: 'none'
				});
				return;
			}
			this.$refs.ModelPublicRef.show = true;
			this.addText = '';
		},
		// 添加标签接口请求

		verifyTap: debounce(function() {
			this.confirmTap();
		}, 1000),
		confirmTap() {
			if (strTrim(this.addText)) {
				uni.showLoading({
					title: '保存中...',
					icon: 'none'
				});
				cardPortrayAdd({
					customPortrayName: this.addText
				})
					.then(res => {
						if (res.code == 0) {
							this.fromData.listPortray.push({
								portrayName: res.data.customPortrayName,
								portrayId: res.data.customPortrayId
							});
							// this.isAdd = false;
							this.$refs.ModelPublicRef.show = false;
						}
					})
					.finally(() => {
						uni.hideLoading();
					});
			} else {
				uni.showToast({
					icon: 'none',
					title: '请输入标签'
				});
			}
		},
		// 取消弹窗
		closeTag() {
			this.isAdd = false;
			this.addText = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.content-wrap {
	height: calc(100vh);
	padding: 40rpx;
	background-color: var(--viewBgColor);
}
.tips {
	padding: 20rpx 0;
	line-height: 40rpx;
	border-radius: 12rpx;
	display: flex;
	color: var(--contentFontFourColor);
	.tips-icon {
		margin-right: 8rpx;
	}
}
.card {
	padding: 30rpx 0 30rpx 0;
	min-height: 326rpx;
}
.card .hd {
	height: 40rpx;
	color: var(--titleFontColor);
	font-weight: 600;
}
.tag {
	margin: 16rpx 16rpx 0 0;
	padding: 0 20rpx;
	height: 48rpx;
	border-radius: 24rpx;
	background: var(--translucenceButtonBackOneColor);
}
.tag .icon-del {
	margin-left: 20rpx;
}
.tag .icon-add {
	margin-right: 4rpx;
}
.uni-input {
	margin-top: 40rpx;
	padding: 0 20rpx;
	width: 440rpx;
	height: 66rpx;
	background: #f7f8ff;
	border-radius: 8rpx;
}
// .label-input{}
</style>
